<template>
  <div>
    <div class="conditionBox">
      <div class="conditionRow">
        <el-input v-model="dataList.conditionList.dlrName" class="w-50 m-2" placeholder="配送商名称/联系电话/登录名" 
                  @keyup.enter="getNewTabList" />
      </div>
      <div class="conditionRow">
        <span>代理商</span>
        <el-select v-model="dataList.conditionList.agentId" class="m-2 w90" placeholder="请选择" @change="getMarketerList">
          <el-option v-for="item in dataList.agentList" :key="item.listKey" :label="item.listValue" :value="item.listKey"></el-option>
        </el-select>
      </div>
      <div class="conditionRow">
        <span>市场人员</span>
        <el-select v-model="dataList.conditionList.marketer" class="m-2 w90" placeholder="请选择">
          <el-option v-for="item in dataList.marketerList" :key="item.listKey" :label="item.listValue" :value="item.listKey"></el-option>
        </el-select>
      </div>
      <div class="conditionRow">
        <span>版本</span>
        <el-select v-model="dataList.conditionList.edition" class="m-2 w90" placeholder="请选择">
          <el-option v-for="item in dataList.editionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="conditionRow">
        <span>资质认证</span>
        <el-select v-model="dataList.conditionList.bsLic" class="m-2 w90" placeholder="请选择">
          <el-option v-for="item in dataList.bsLicList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="conditionRow">
        <span>部门状态</span>
        <el-select v-model="dataList.conditionList.state" class="m-2 w90" placeholder="请选择">
          <el-option v-for="item in dataList.stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="conditionRow">
        <span>进件状态</span>
        <el-select v-model="dataList.conditionList.merchantStatus" class="m-2 w90" placeholder="请选择">
          <el-option v-for="item in dataList.merchantStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="conditionRow">
        <span>区域</span>
        <!-- <el-cascader v-model="value" :options="options"></el-cascader> -->
        <el-select v-model="dataList.conditionList.provincesCode" class="w120 mR10" placeholder="请选择" @change="getCitiesList">
          <el-option v-for="item in provincesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-show="dataList.conditionList.provincesCode" v-model="dataList.conditionList.citiesCode" class="w120 mR10"
          placeholder="请选择" @change="getCountriesList">
          <el-option v-for="item in citiesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-show="dataList.conditionList.citiesCode" v-model="dataList.conditionList.areaId" class="w120 mR10"
          placeholder="请选择" @change="getstreetList">
          <el-option v-for="item in countriesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="conditionRow">
        <span>合同状态</span>
        <!-- <el-select class="m-2 w90 mR10" v-model="" placeholder="请选择" disabled>
          <el-option label="软件" value=""></el-option>
        </el-select> -->
        <el-select v-model="dataList.conditionList.contractStatus" class="m-2 w90" placeholder="请选择">
          <el-option v-for="item in dataList.contractStatusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="getNewTabList">搜索</el-button>
      <div class="operate">
        <el-button type="primary" @click="dataList.conditionList.dialogShow = true;">添加配送商</el-button>
        <el-button type="primary">导出</el-button>
      </div>
    </div>
    <div class="tabBox mT20" v-loading="dataList.loading">
      <el-table :data="dataList.tableData" border style="width: 100%" max-height="400">
        <el-table-column label="序号" width="100" fixed="left">
          <template #default="scope">
            {{(dataList.conditionList.pageNumber-1)*dataList.conditionList.pageSize + scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="dlrName" label="名称" width="140" fixed="left" show-overflow-tooltip/>
        <el-table-column prop="areaName" label="区域" width="100"/>
        <el-table-column prop="deptName" label="代理商" width="100"/>
        <el-table-column prop="realName" label="市场人员" width="100"/>
        <el-table-column prop="merchantStatusStr" label="进件状态" width="100"/>
        <el-table-column prop="legalPerson" label="负责人" width="100"/>
        <el-table-column label="注册时长" width="180">
          <template #default="scope">
            {{scope.row.regist + ' ' + scope.row.regists}}
          </template>
        </el-table-column>
        <el-table-column prop="edition" label="版本" width="80"/>
        <el-table-column prop="tel" label="联系电话" width="110"/>
        <el-table-column prop="date" label="上次配送时间" width="130"/>
        <el-table-column label="是否接收短信" width="110">
          <template #default="scope">
            {{scope.row.isSend=='TRUE'?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column label="关联采购商" width="90">
          <template #default="scope">
            {{(scope.row.buyerNum?scope.row.buyerNum:'0') + '家'}}
          </template>
        </el-table-column>
        <el-table-column label="部门状态" width="90">
          <template #default="scope">
            {{scope.row.state=='TRUE'?'正常':'禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="强制溯源" width="90">
          <template #default="scope">
            {{scope.row.sourceforce=='TRUE'?'是':'否'}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-dropdown @command="(command) => {handleCommand(command,scope)}">
              <span style="color: #409eff;">操作</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="goInfo">查看信息</el-dropdown-item>
                  <el-dropdown-item>修改信息</el-dropdown-item> 
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :currentPage="dataList.conditionList.pageNumber" :page-size="dataList.conditionList.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="dataList.pageTotal" :page-sizes="[10, 20, 50, 100]"
        @current-change="pageNumChange" @size-change="pageSizeChange" class="pageContainer">
      </el-pagination>
    </div>
    <add-popup :dialogShow="dataList.conditionList.dialogShow" @closePopup="closePopup"></add-popup>
  </div>
</template>
<script setup>
  import addPopup from './add.vue'
  import {
    reactive,
    onMounted,
    inject,
    ref
  } from 'vue'
  const $post = inject('$post');
  const $router = inject('$router');
  const $getProvinces = inject('$getProvinces');
  const $getCities = inject('$getCities');
  const $getCountries = inject('$getCountries');

  const dataList = reactive({
    loading: false,
    conditionList: {// 筛选条件
      dlrName: '',
      agentId: '',
      marketer: '',
      edition: '',
      bsLic: '',
      state: '',
      merchantStatus: '',
      contractStatus: '',
      pageNumber: 1,
      pageSize: 10,
      provincesCode: '',
      citiesCode: '',
      areaId: ''
    },
    agentList: [],//代理商列表
    marketerList: [],//市场人员列表
    editionList: [{//版本列表
      'label': '全部',
      'value': ''
    },{
      'label': '溯源版',
      'value': 'TTSAQC'
    },{
      'label': '标准版',
      'value': 'STANDARD'
    },{
      'label': '专业版',
      'value': 'PROFESSION'
    },{
      'label': '企业版',
      'value': 'ENTERPRISE'
    }],
    bsLicList: [{//资质认证列表
      'label': '全部',
      'value': ''
    }, {
      'label': '未审核',
      'value': 'NONE'
    }, {
      'label': '审核失败',
      'value': 'UNPASS'
    }, {
      'label': '审核通过',
      'value': 'PASS'
    }],
    stateList: [{//部门状态列表
      'label': '全部',
      'value': ''
    }, {
      'label': '正常',
      'value': 'TRUE'
    }, {
      'label': '禁用',
      'value': 'FALSE'
    }],
    merchantStatusList: [{//进件状态列表
      'label': '全部',
      'value': ''
    }, {
      'label': '未进件',
      'value': 'NONE'
    }, {
      'label': '审核中',
      'value': 'WAITING'
    }, {
      'label': '审核失败',
      'value': 'FAILD'
    }, {
      'label': '审核成功',
      'value': 'SUCCESS'
    }],
    contractStatusList: [{//合同状态列表
      'label': '全部',
      'value': ''
    }, {
      'label': '正常',
      'value': 'NORMAL'
    }, {
      'label': '将到期',
      'value': 'WILL_DUE'
    }, {
      'label': '已到期',
      'value': 'DUE'
    }, {
      'label': '无合同',
      'value': 'NONE'
    }],
    tableData: [],
    pageTotal: 20,
    dialogShow: false
  })
  const provincesList = $getProvinces();//省
  const citiesList = ref([]);//市
  const countriesList = ref([]);//区
  const getCitiesList = ()=>{//获取市列表
    citiesList.value = $getCities(dataList.conditionList.provincesCode);
    dataList.conditionList.citiesCode = '';
    dataList.conditionList.areaId = '';
  }
  const getCountriesList = ()=>{//获取区列表
    countriesList.value = $getCountries(dataList.conditionList.citiesCode);
    dataList.conditionList.areaId = '';
  }
  const getAgentList = ()=>{//获取代理商列表
    $post('/v2/consumer/agentList').then(res => {
      dataList.agentList = res.data;
    })
  }
  const getMarketerList = ()=>{//获取市场人员列表
    $post('/v2/consumer/marketerList',{
      agentId: dataList.conditionList.agentId
    }).then(res => {
      dataList.marketerList = res.data;
    })
  }
  const getTabList = ()=>{//获取表格数据
    dataList.loading = true;
    $post('consumer/deliverPage', dataList.conditionList).then(res => {
      dataList.tableData = res.data;
      dataList.loading = false;
    })
  }
  const getNewTabList = ()=>{//查询条件改变，获取表格数据
    dataList.conditionList.pageNumber = 1;
    getTabList();
  }
  const pageNumChange = (num)=>{//分页页数改变，获取表格
    dataList.conditionList.pageNumber = num;
    getTabList();
  }
  const pageSizeChange = (size) => {//分页条数改变，获取表格
    dataList.conditionList.pageSize = size;
    getTabList();
  }
  const handleCommand = (row, command) => {
    commandList[command](row);
  }
  const commandList = {//操纵方法
    goInfo: (row)=>{
      $router.push({
        path: '/operation/consumer-manage/detail',
        query: {}
      })
    }
  }
  const closePopup = () => {
    dataList.conditionList.dialogShow = false;
  }
  onMounted(() => {
    getAgentList();
    getTabList();
  })
  
</script>
<style scoped="scoped" lang="scss">
  .operate{
    float: right;
  }
</style>